<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<s:include value="/include/header/header.jsp"></s:include>
	Service Type
<s:include value="/include/header/mainNav.jsp"></s:include>
	<!--NAV ENDS HERE-->
    <!--DISPLAY STARTS HERE-->
    <div id="display">
    <!--DISPLAY INNER STARTS HERE-->
	<script>
		function hide() {
			var earrings = document.getElementById('table, column');
			table.style.visibility = 'hidden';
			column.style.visibility = 'hidden';
		}

		function show() {
			var earrings = document.getElementById('table, column');
			table.style.visibility = 'visible';
			column.style.visibility = 'visible';
		}

		function typeChange(select) {
			if (select.value == '2') {
				show();
			} else if (select.value == '1') {
				hide();
			}
		}
	</script>
	<div id="display-inner">
		<h1>Service Type</h1>
		<table>
			<tr>
				<td class="table-width">Option</td>
				<td class="table-width">ID</td>
				<td class="table-width">Description</td>
				<td class="table-width">Type</td>
				<td class="table-width">Unit</td>
				<td class="table-width">Column</td>
				<td class="table-width">Table</td>
			</tr>
			<s:iterator value="serviceTypes" var="ser">

				<tr>
					<td class="table-width"><a href="serviceType.action?serviceTypeId=<s:property value='#ser.id'/>">Edit</a></td>
					<td class="table-width"><s:property value="#ser.id" /></td>
					<td class="table-width"><s:property value="#ser.description" /></td>
					<td class="table-width">
						<s:if test="#ser.type==1" >
							Recurring
						</s:if >
						<s:if test="#ser.type==2" >
							Usage
						</s:if >
						<s:if test="#ser.type==3" >
							Both
						</s:if >
					</td>
					<td class="table-width"><s:property value="#ser.unit" /></td>
					<td class="table-width"><s:property value="#ser.servicecolumn" /></td>
					<td class="table-width"><s:property value="#ser.servicetable" /></td>
				</tr>
			</s:iterator>

		</table>

		<form action="serviceType" >
			<p class="paragraph-form">
				<s:textfield name="serviceType.description" label="Description" cssClass ="input-field" />
			</p>
			<p class="paragraph-form">
				<s:textfield name="serviceType.unit" label="Unit" cssClass ="input-field" />
			</p>
			<p class="paragraph-form">
				Type: 
				<select name="serviceType.type" 
					class="dropdown" 
					onchange="typeChange(this)" >
					<option value="1">Recurring</option>
					<option value="2">Usage</option>
					<option value="3">Both</option>
				</select>
			</p>
			<p id="table" class="paragraph-form">
				<s:textfield name="serviceType.servicetable" label="Table" cssClass ="input-field" />
			</p>
			<p id="column" class="paragraph-form">
				<s:textfield name="serviceType.servicecolumn" label="Column" cssClass ="input-field" />
			</p>

			<p>
				<s:hidden name="serviceType.id" />
				<s:submit value="Create" id="submit-button-2" />
			</p>
			<br>
		</form>

		<s:include value="/include/footer/footer.jsp"></s:include>		
